تقاطع هایلایت سفارشی CSS: تسلط بر همپوشانی انتخاب‌های چندگانه

شبه-عنصر ::highlight در CSS کنترل قدرتمندی بر استایل‌دهی به انتخاب‌های متنی ارائه می‌دهد. در حالی که هایلایت کردن ساده متن کار مستقیمی است، مدیریت تقاطع انتخاب‌های چندگانه و سفارشی‌سازی نواحی همپوشان آن‌ها نیازمند درک عمیق‌تری است. این مقاله به بررسی تکنیک‌های پیشرفته برای تسلط بر تقاطع هایلایت سفارشی CSS می‌پردازد و مثال‌های عملی و بینش‌های کاربردی برای ایجاد رابط‌های کاربری صیقلی و قابل دسترس ارائه می‌دهد.

درک مبانی: شبه-عنصر ::highlight

شبه-عنصر ::highlight به شما امکان می‌دهد متنی را که توسط کاربر انتخاب شده است، استایل‌دهی کنید. این قابلیت فراتر از رنگ‌های پس‌زمینه و رنگ متن ساده است؛ این امکان را به توسعه‌دهندگان می‌دهد تا طیف گسترده‌ای از ویژگی‌های CSS، از جمله حاشیه، سایه و حتی انیمیشن را به متن انتخاب شده اعمال کنند. این یک پیشرفت قابل توجه نسبت به اتکای صرف به هایلایت پیش‌فرض مرورگر است که اغلب ناهماهنگ است و همیشه با طراحی یک وب‌سایت همخوانی ندارد.

سینتکس پایه

سینتکس پایه برای استفاده از ::highlight شامل هدف قرار دادن اشیاء Selection خاص از طریق انتخابگرهای CSS یا از طریق CSS Custom Highlight API است.

در اینجا یک مثال ساده آورده شده است:

            ::highlight {
  background-color: yellow;
  color: black;
}

            

              
                Copy
              
            
          

این قطعه کد، رنگ پس‌زمینه هر متن انتخاب شده را به زرد و رنگ متن را به سیاه تغییر می‌دهد. این یک استایل سراسری است که برای همه انتخاب‌ها در صفحه اعمال می‌شود. برای هدف قرار دادن انتخاب‌های خاص، باید از CSS Custom Highlight API استفاده کنید.

CSS Custom Highlight API: کنترل دقیق

CSS Custom Highlight API روشی دقیق‌تر برای مدیریت و استایل‌دهی به انتخاب‌های متنی فراهم می‌کند. این API به شما امکان می‌دهد هایلایت‌های نام‌گذاری شده ایجاد کرده و استایل‌های خاصی را به آن‌ها اعمال کنید. این امر به ویژه زمانی مفید است که نیاز به تمایز بین انواع مختلف انتخاب‌ها یا هنگام کار با انتخاب‌های همپوشان دارید.

ایجاد و اعمال هایلایت‌های نام‌گذاری شده

برای استفاده از CSS Custom Highlight API، باید از جاوا اسکریپت برای ایجاد و اعمال هایلایت‌های نام‌گذاری شده استفاده کنید. در اینجا یک راهنمای گام به گام آورده شده است:

1. ثبت یک هایلایت نام‌گذاری شده: از CSS.registerProperty() برای ثبت یک ویژگی سفارشی استفاده کنید که برای استایل‌دهی به هایلایت شما استفاده خواهد شد. این کار معمولاً یک بار در ابتدای اسکریپت شما انجام می‌شود.
2. ایجاد یک محدوده (Range): نقاط شروع و پایان متنی را که می‌خواهید هایلایت کنید با استفاده از اشیاء Range تعریف کنید.
3. دریافت شیء Selection: انتخاب فعلی را با استفاده از window.getSelection() به دست آورید.
4. افزودن محدوده به Selection: از متد addRange() برای افزودن محدوده به انتخاب استفاده کنید. این کار اغلب با حذف همه محدوده‌های موجود با استفاده از removeAllRanges() همراه است.
5. اعمال استایل‌ها: استایل هایلایت را تعریف کنید. این ممکن است شامل تنظیم متغیرهای CSS باشد.

در اینجا یک مثال برای نمایش این فرآیند آورده شده است:

            // Register the highlight property (run once)
CSS.registerProperty({
  name: '--my-highlight-color',
  syntax: '',
  inherits: false,
  initialValue: 'rgba(255, 165, 0, 0.5)' // Semi-transparent orange
});

// Function to apply the highlight
function applyHighlight(startNode, startOffset, endNode, endOffset, highlightName) {
  // 1. Create a Range object
  const range = document.createRange();
  range.setStart(startNode, startOffset);
  range.setEnd(endNode, endOffset);

  // 2. Get the Selection object
  const selection = window.getSelection();

  // 3. Clear existing selections and add the new range
  selection.removeAllRanges();
  selection.addRange(range);

  // 4. Apply the highlight using ::highlight(highlightName) in CSS
  //   No JavaScript needed for direct styling, CSS handles the look
}

// Example usage:
const myElement = document.getElementById('my-text-element');
// Assuming myElement contains the text you want to highlight
applyHighlight(myElement.firstChild, 5, myElement.firstChild, 15, 'my-highlight');

            

              
                Copy
              
            
          

و CSS مربوطه:

            ::highlight(my-highlight) {
  background-color: var(--my-highlight-color);
}

            

              
                Copy
              
            
          

در این مثال، ما ویژگی سفارشی --my-highlight-color را ثبت می‌کنیم، سپس متن را از کاراکتر ۵ تا ۱۵ در داخل `my-text-element` هایلایت می‌کنیم. سپس CSS از ویژگی ثبت شده برای تنظیم رنگ پس‌زمینه استفاده می‌کند.

ملاحظات بین‌المللی برای محدوده‌های متنی

هنگام کار با محدوده‌های متنی در زبان‌های مختلف، در نظر گرفتن یونیکد و رمزگذاری کاراکترها بسیار مهم است. مقادیر startOffset و endOffset نمایانگر شاخص‌های کاراکتر هستند که می‌تواند در زبان‌هایی که از کاراکترهای چند بایتی یا خوشه‌های گرافمی (grapheme clusters) استفاده می‌کنند، مشکل‌ساز باشد. به عنوان مثال، در برخی از زبان‌های شرق آسیا، یک کاراکتر ممکن است با چندین بایت نمایش داده شود. ممکن است لازم باشد از کتابخانه‌هایی استفاده کنید که یونیکد را به درستی مدیریت می‌کنند تا اطمینان حاصل شود که هایلایت‌های شما به طور دقیق در زبان‌های مختلف اعمال می‌شوند.

علاوه بر این، جهت متن (چپ به راست در مقابل راست به چپ) نیز می‌تواند بر نحوه محاسبه و اعمال محدوده‌ها تأثیر بگذارد. حتماً پیاده‌سازی هایلایت خود را با زبان‌ها و اسکریپت‌های مختلف آزمایش کنید تا از عملکرد و رندر صحیح اطمینان حاصل کنید.

مدیریت همپوشانی انتخاب‌های چندگانه

چالش واقعی زمانی به وجود می‌آید که با چندین انتخاب همپوشان سروکار داریم. رفتار پیش‌فرض مرورگر برای انتخاب‌های همپوشان می‌تواند غیرقابل پیش‌بینی باشد و اغلب جلوه بصری مورد نظر را ارائه نمی‌دهد. CSS Custom Highlight API ابزارهایی برای مدیریت این همپوشانی فراهم می‌کند و به شما امکان می‌دهد نحوه تعامل هایلایت‌های مختلف با یکدیگر را کنترل کنید.

درک مشکل

هنگامی که چندین انتخاب با هم تداخل دارند، مرورگر معمولاً استایل‌های آخرین انتخاب انجام شده را اعمال می‌کند. این می‌تواند منجر به ناهماهنگی‌های بصری و تجربه کاربری گیج‌کننده شود. به عنوان مثال، اگر دو هایلایت همپوشان، یکی سبز و دیگری آبی داشته باشید، ناحیه همپوشان ممکن است فقط هایلایت آبی را نشان دهد و هایلایت سبز را کاملاً پنهان کند. برای حل این مشکل، باید یک استراتژی برای حل همپوشانی پیاده‌سازی کنید.

استراتژی‌های حل همپوشانی

چندین استراتژی وجود دارد که می‌توانید برای حل همپوشانی هایلایت‌ها از آنها استفاده کنید:

• اولویت‌بندی: اولویت‌های متفاوتی را به انواع مختلف هایلایت‌ها اختصاص دهید. هایلایتی که بالاترین اولویت را دارد در ناحیه همپوشان برتری خواهد داشت.
• ترکیب (Blending): رنگ‌های هایلایت‌های همپوشان را برای ایجاد یک رنگ جدید با هم ترکیب کنید. این می‌تواند روشی جذاب از نظر بصری برای نشان دادن وجود چندین انتخاب باشد.
• لایه‌بندی: از ویژگی‌های CSS مانند z-index برای کنترل ترتیب چیدمان هایلایت‌ها استفاده کنید. این به شما امکان می‌دهد یک افکت لایه‌ای ایجاد کنید، که در آن یک هایلایت روی دیگری ظاهر می‌شود.
• رندر سفارشی: برای سناریوهای پیچیده، می‌توانید از جاوا اسکریپت برای تحلیل محدوده‌های همپوشان و رندر کردن عناصر بصری سفارشی، مانند حاشیه یا آیکون، برای نشان دادن وجود چندین انتخاب استفاده کنید.

پیاده‌سازی اولویت‌بندی

اولویت‌بندی شامل اختصاص یک سطح اولویت به هر هایلایت و اطمینان از این است که هایلایت با بالاترین اولویت در ناحیه همپوشان نمایش داده شود. این کار را می‌توان با مدیریت دقیق ترتیب اعمال هایلایت‌ها و استفاده از CSS برای کنترل ظاهر آنها انجام داد.

در اینجا یک مثال از نحوه پیاده‌سازی اولویت‌بندی با استفاده از متغیرهای CSS و جاوا اسکریپت آورده شده است:

            // Define highlight priorities
const highlightPriorities = {
  'important-highlight': 2,
  'secondary-highlight': 1,
  'default-highlight': 0
};

// Function to apply a highlight with a specific priority
function applyHighlightWithPriority(startNode, startOffset, endNode, endOffset, highlightName) {
  // (Same range creation and selection logic as before)
  const range = document.createRange();
  range.setStart(startNode, startOffset);
  range.setEnd(endNode, endOffset);
  const selection = window.getSelection();
  selection.removeAllRanges();
  selection.addRange(range);

  // Apply the highlight name to a custom property on the selection.
  // No direct CSS manipulation here; relies on the CSS below.
  //  This requires polyfilling for browsers lacking CSS.supports.
  //  Also, use caution with the security implications of setting
  //  arbitrary styles via JavaScript and make sure only trusted code can do this.
  let priority = highlightPriorities[highlightName] || 0;

  if (CSS.supports('selector(::highlight(' + highlightName + ''))')) {
      // No need to directly manipulate the style object if CSS.supports is available
      // The CSS will handle the rest based on the selection.
  }
  else {
      // Fallback behavior, apply styles directly.  This is NOT recommended
      //  for production code, as it's difficult to manage and maintain.
      //   It is better to use the CSS Custom Highlight API with a polyfill, or simply
      //   gracefully degrade the highlighting feature if the browser doesn't support it.
      console.warn("CSS.supports not supported, direct style manipulation may be needed");
  }

}

            

              
                Copy
              
            
          

و CSS مربوطه:

            ::highlight(default-highlight) {
  background-color: lightgray;
  z-index: 0; // Lowest priority
}

::highlight(secondary-highlight) {
  background-color: lightblue;
  z-index: 1;
}

::highlight(important-highlight) {
  background-color: orange;
  z-index: 2; // Highest priority
}

/* Use to address z-index issues in some browsers*/
::highlight {
  position: relative;
}

            

              
                Copy
              
            
          

در این مثال، به هر نوع هایلایت یک مقدار z-index اختصاص داده شده است، که مقادیر بالاتر نشان‌دهنده اولویت بالاتر است. ممکن است اعلام position: relative بر روی شبه-عنصر ::highlight برای اطمینان از عملکرد صحیح z-index در برخی مرورگرها لازم باشد.

پیاده‌سازی ترکیب (Blending)

ترکیب شامل ترکیب رنگ‌های هایلایت‌های همپوشان برای ایجاد یک رنگ جدید است. این کار را می‌توان با استفاده از حالت‌های ترکیبی CSS (blend modes) یا با دستکاری رنگ‌های پس‌زمینه هایلایت‌ها با استفاده از جاوا اسکریپت انجام داد.

در اینجا یک مثال از نحوه پیاده‌سازی ترکیب با استفاده از حالت‌های ترکیبی CSS آورده شده است:

            ::highlight(highlight-1) {
  background-color: rgba(255, 0, 0, 0.5); /* Red with 50% opacity */
  mix-blend-mode: multiply;
}

::highlight(highlight-2) {
  background-color: rgba(0, 0, 255, 0.5); /* Blue with 50% opacity */
  mix-blend-mode: multiply;
}

            

              
                Copy
              
            
          

در این مثال، از ویژگی mix-blend-mode: multiply برای ترکیب رنگ‌های هایلایت‌های همپوشان استفاده شده است. هنگامی که یک هایلایت قرمز با یک هایلایت آبی همپوشانی داشته باشد، رنگ حاصل در ناحیه همپوشان بنفش خواهد بود.

پیاده‌سازی لایه‌بندی

لایه‌بندی شامل استفاده از ویژگی‌های CSS مانند z-index برای کنترل ترتیب چیدمان هایلایت‌ها است. این به شما امکان می‌دهد یک افکت لایه‌ای ایجاد کنید که در آن یک هایلایت روی دیگری ظاهر می‌شود. این رویکرد شبیه به اولویت‌بندی است، اما از نظر استایل بصری انعطاف‌پذیری بیشتری را فراهم می‌کند.

مثالی که در بخش اولویت‌بندی ارائه شد، قبلاً نحوه پیاده‌سازی لایه‌بندی با استفاده از z-index را نشان می‌دهد.

پیاده‌سازی رندر سفارشی

برای سناریوهای پیچیده، می‌توانید از جاوا اسکریپت برای تحلیل محدوده‌های همپوشان و رندر کردن عناصر بصری سفارشی، مانند حاشیه یا آیکون، برای نشان دادن وجود چندین انتخاب استفاده کنید. این رویکرد بیشترین انعطاف‌پذیری را فراهم می‌کند اما بیشترین تلاش را برای پیاده‌سازی نیاز دارد.

در اینجا یک مرور کلی از نحوه پیاده‌سازی رندر سفارشی آورده شده است:

1. تحلیل محدوده‌های همپوشان: از جاوا اسکریپت برای پیمایش انتخاب‌ها و شناسایی هرگونه محدوده همپوشان استفاده کنید.
2. ایجاد عناصر سفارشی: عناصر HTML مانند <span> یا <div> را برای نمایش عناصر بصری سفارشی ایجاد کنید.
3. موقعیت‌دهی عناصر: عناصر سفارشی را با استفاده از جاوا اسکریپت و CSS دقیقاً روی محدوده‌های همپوشان قرار دهید.
4. استایل‌دهی به عناصر: استایل‌های سفارشی را برای ایجاد جلوه بصری مورد نظر به عناصر اعمال کنید.
5. درج عناصر: عناصر سفارشی را در DOM درج کنید و اطمینان حاصل کنید که نسبت به متن به درستی موقعیت‌دهی شده‌اند.

این رویکرد می‌تواند پیچیده باشد و نیاز به توجه دقیق به جزئیات دارد، اما کنترل نهایی را بر ظاهر هایلایت‌های همپوشان فراهم می‌کند. مهم است که موارد استثنایی مانند شکستن خطوط متن (text wrapping) و تغییر اندازه فونت را مدیریت کنید تا اطمینان حاصل شود که عناصر سفارشی به درستی در موقعیت خود باقی می‌مانند.

ملاحظات دسترسی‌پذیری

هنگام سفارشی‌سازی هایلایت‌های متن، در نظر گرفتن دسترسی‌پذیری برای اطمینان از اینکه وب‌سایت شما برای افراد دارای معلولیت قابل استفاده است، بسیار مهم است. در اینجا چند ملاحظه مهم آورده شده است:

• کنتراست رنگ: اطمینان حاصل کنید که کنتراست رنگ بین رنگ هایلایت و رنگ متن برای افراد کم‌بینا کافی است. از یک ابزار بررسی کنتراست رنگ برای تأیید اینکه نسبت کنتراست با دستورالعمل‌های دسترسی‌پذیری مطابقت دارد، استفاده کنید. ابزار بررسی کنتراست WebAIM یک منبع عالی است.
• ناوبری با صفحه‌کلید: اطمینان حاصل کنید که کاربران می‌توانند با استفاده از صفحه‌کلید در متن هایلایت شده پیمایش کرده و با آن تعامل داشته باشند. این ممکن است شامل افزودن ویژگی‌های ARIA به عناصر هایلایت شده برای ارائه اطلاعات معنایی به فناوری‌های کمکی باشد.
• سازگاری با صفحه‌خوان: پیاده‌سازی هایلایت خود را با صفحه‌خوان‌ها آزمایش کنید تا اطمینان حاصل شود که متن هایلایت شده به درستی اعلام می‌شود. متن توصیفی برای هایلایت‌ها ارائه دهید تا به کاربران در درک هدف و معنای آنها کمک کند.
• از اتکای صرف به رنگ خودداری کنید: برای انتقال معنا فقط به رنگ تکیه نکنید. نشانه‌های بصری جایگزین مانند حاشیه یا آیکون ارائه دهید تا اطمینان حاصل شود که هایلایت‌ها برای افراد کوررنگ قابل دسترس هستند.

مثال‌های دنیای واقعی و موارد استفاده

تقاطع هایلایت سفارشی می‌تواند در انواع سناریوهای دنیای واقعی برای بهبود تجربه کاربری استفاده شود. در اینجا چند نمونه آورده شده است:

• ویرایشگرهای کد: ویرایشگرهای کد می‌توانند از هایلایت‌های سفارشی برای نشان دادن خطاهای سینتکس، هشدارها و سایر اطلاعات مهم استفاده کنند. هایلایت‌های همپوشان می‌توانند برای نشان دادن چندین مشکل در یک ناحیه از کد استفاده شوند.
• ویرایشگرهای اسناد: ویرایشگرهای اسناد می‌توانند از هایلایت‌های سفارشی برای نشان دادن تغییرات پیگیری شده، نظرات و حاشیه‌نویسی‌ها استفاده کنند. هایلایت‌های همپوشان می‌توانند برای نشان دادن چندین بازبینی در یک بخش از متن استفاده شوند.
• نتایج جستجو: صفحات نتایج جستجو می‌توانند از هایلایت‌های سفارشی برای نشان دادن عبارات جستجو شده در نتایج جستجو استفاده کنند. هایلایت‌های همپوشان می‌توانند برای نشان دادن چندین عبارت جستجو که در یک ناحیه از متن ظاهر می‌شوند، استفاده شوند.
• ابزارهای حاشیه‌نویسی: ابزارهای حاشیه‌نویسی می‌توانند از هایلایت‌های سفارشی برای اجازه دادن به کاربران برای هایلایت و حاشیه‌نویسی متن استفاده کنند. هایلایت‌های همپوشان می‌توانند برای نشان دادن انواع مختلف حاشیه‌نویسی‌ها در یک ناحیه از متن استفاده شوند.

بهترین شیوه‌ها

در اینجا چند مورد از بهترین شیوه‌ها برای پیاده‌سازی تقاطع هایلایت سفارشی CSS آورده شده است:

• از CSS Custom Highlight API استفاده کنید: CSS Custom Highlight API انعطاف‌پذیرترین و کارآمدترین راه برای مدیریت و استایل‌دهی به انتخاب‌های متنی را فراهم می‌کند.
• دسترسی‌پذیری را در نظر بگیرید: همیشه هنگام سفارشی‌سازی هایلایت‌های متن، دسترسی‌پذیری را در نظر بگیرید. اطمینان حاصل کنید که هایلایت‌ها برای افراد دارای معلولیت قابل استفاده هستند.
• به طور کامل آزمایش کنید: پیاده‌سازی هایلایت خود را به طور کامل در مرورگرها، دستگاه‌ها و زبان‌های مختلف آزمایش کنید تا از عملکرد صحیح آن اطمینان حاصل کنید.
• از یک استایل بصری سازگار استفاده کنید: از یک استایل بصری سازگار برای هایلایت‌های خود استفاده کنید تا یک تجربه کاربری واضح و شهودی ارائه دهید.
• کد خود را مستند کنید: کد خود را به طور واضح و مختصر مستند کنید تا نگهداری و به‌روزرسانی آن آسان‌تر شود.

نتیجه‌گیری

تقاطع هایلایت سفارشی CSS یک تکنیک قدرتمند است که به شما امکان می‌دهد رابط‌های کاربری جذاب از نظر بصری و آموزنده ایجاد کنید. با تسلط بر شبه-عنصر ::highlight و CSS Custom Highlight API، می‌توانید ظاهر انتخاب‌های متنی را کنترل کرده و تقاطع انتخاب‌های چندگانه را مدیریت کنید تا یک تجربه کاربری یکپارچه و قابل دسترس فراهم آورید. به یاد داشته باشید که دسترسی‌پذیری را در اولویت قرار دهید، به طور کامل آزمایش کنید و از یک استایل بصری سازگار استفاده کنید تا اطمینان حاصل شود که پیاده‌سازی هایلایت شما مؤثر و کاربرپسند است.

منابع بیشتر

• MDN Web Docs: ::highlight
• MDN Web Docs: CSS Custom Highlight API
• WebAIM Color Contrast Checker